<template>
  <view class="task">
    <image class="bgImage" :src="IMAGES.TASK_BG_01"></image>
    <view class="container flex flex-direction-column align-center">
      <view class="header" @tap="go('/pages/vip/index')"><image class="headerImage" :src="IMAGES.TASK_AD_01"></image></view>
      <!-- 任务列表 -->
      <scroll-view scroll-y class="body">
        <view class="tasks">
          <view class="taskItem" v-for="(item, index) in dailys" :key="index">
            <view class="taskTitle">{{ item.title }}({{ item.userStep > item.num ? item.num : item.userStep }}/{{ item.num }})</view>
            <view class="taskDesc">{{ item.description }}</view>
            <view class="taskOperation">
              <view class="tash-reward">
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 1 }" v-if="item.reward.flower">
                  <view class="reward-image"><image :src="IMAGES.ICON_MONEY_FLOWER"></image></view>
                  <view class="reward-text" v-text="item.reward.flower"></view>
                </view>
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 1 }" v-if="item.reward.sunshine">
                  <view class="reward-image"><image :src="IMAGES.ICON_MONEY_SUN"></image></view>
                  <view class="reward-text" v-text="item.reward.sunshine"></view>
                </view>
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 1 }" v-if="item.reward.score">
                  <view class="reward-image"><image :src="IMAGES.ICON_MONEY_SCORE"></image></view>
                  <view class="reward-text" v-text="item.reward.score"></view>
                </view>
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 0 }" v-if="item.sVipReward.flower">
                  <view class="reward-image vip">
                    <image :src="IMAGES.ICON_MONEY_FLOWER"></image>
                    <text>vip</text>
                  </view>
                  <view class="reward-text" v-text="item.sVipReward.flower"></view>
                </view>
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 0 }" v-if="item.sVipReward.sunshine">
                  <view class="reward-image vip">
                    <image :src="IMAGES.ICON_MONEY_SUN"></image>
                    <text>vip</text>
                  </view>
                  <view class="reward-text" v-text="item.sVipReward.sunshine"></view>
                </view>
                <!-- 积分 -->
                <view class="reward-item" :class="{ gray: state.user.userInfo.vip === 0 }" v-if="item.sVipReward.score">
                  <view class="reward-image vip">
                    <image :src="IMAGES.ICON_MONEY_SCORE"></image>
                    <text>vip</text>
                  </view>
                  <view class="reward-text" v-text="item.sVipReward.score"></view>
                </view>
              </view>
              <!-- 
              status
                -1 未到时间
                0 未完成
                1 待领取
                2 已完成
              -->

              <view class="task-btn btn-one" v-if="item.status === -1">未到时间</view>
              <view class="task-btn btn-two" v-else-if="item.status === 1" @click="getDailyReward(item.id)">领取</view>
              <view class="task-btn btn-three" v-else-if="item.status === 2">已领取</view>
              <navigator :url="item.url" :open-type="item.isTab === 1 ? 'switchTab' : 'navigate'" class="task-btn btn-five" v-else>去完成</navigator>
            </view>
          </view>
        </view>
        <!-- 底部 -->
        <view class="footer"><text class="tip">每日任务每日0点更新</text></view>
      </scroll-view>
    </view>
  </view>
</template>
<script>
import { IMAGES } from "@/config/resources";
import uniApp from "@/utils/uni-app";
import tabMixin from "../tabMixin";
export default {
    mixins: [tabMixin],
  data() {
    return {
      dailys: []
    };
  },
  computed: {
    IMAGES: () => IMAGES
  },
  onShow() {
    this.init();
  },
  methods: {
    init() {
      return this.$api.task.dailyTasks().then(_ => {
        this.dailys = _.data.data.sort(function(a, b) {
          return a.get - b.get;
        });
        return _.data.data;
      });
    },
    // 领取每日任务奖励
    getDailyReward(id) {
      this.$api.task
        .getDailyReward(id)
        .then(e => {
          uniApp.toast(e.data.msg || "领取成功");
          this.init();
        })
        .catch(e => {
          uniApp.alert(e.data.msg);
        });
    }
  },
  onPullDownRefresh() {
    uni.showLoading({
      title: "任务更新中..."
    });
    this.init()
      .then(() => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
      .catch(e => {
        uniApp.alert(e.message || e.data.msg);
        uni.stopPullDownRefresh();
      });
  }
};
</script>
<style lang="scss" scoped>
.task {
  padding-top: var(--status-bar-height);
  position: relative;
  /* #ifndef APP-PLUS-NVUE */
  height: 100%;
  overflow: hidden;
  /* #endif */
}
.bgImage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 750rpx;
  height: 324rpx;
}
// 内容区域
.container {
  margin-top: 120rpx;
  height: calc(100% - 120rpx);
}
.header {
  text-align: center;
  height: 272rpx;
}
.headerImage {
  width: 701rpx;
  height: 272rpx;
}
.body {
  height: calc(100% - 272rpx);
  overflow-y: scroll;
}
.tasks {
  height: calc(100% - 80rpx);
}
.taskItem {
  background-color: #ffffff;
  border-radius: 6upx;
  padding: 20upx;
  width: 96%;
  margin: 20upx auto;
  box-shadow: 10px 4px 10px 0 #d3d3d3;
}
.taskTitle {
  color: #3c3c3c;
  font-size: 28upx;
}
.taskDesc {
  color: #9aa2af;
  font-size: 24upx;
}

.taskOperation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10upx;
  .tash-reward {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .reward-item {
      text-align: center;
      margin: 0 4upx;
      &.gray {
        filter: grayscale(1);
      }
    }
    .reward-image {
      border: 3upx solid #dfdfdf;
      border-radius: 8upx;
      width: 70upx;
      height: 70upx;
      padding: 10upx;
      &.vip {
        border-color: #fb7299;
        position: relative;
        text {
          padding: 3upx 5upx;
          position: absolute;
          background-color: #fb7299;
          color: #ffffff;
          bottom: 0;
          right: 0;
          font-size: 20upx;
          height: 20upx;
          line-height: 20upx;
          border-top-left-radius: 10upx;
        }
      }
      image {
        width: 100%;
        height: 100%;
      }
    }
    .reward-text {
      font-size: 20upx;
    }
  }
}

.task-btn {
  color: #ffffff;
  padding: 6upx 40upx;
  border-radius: 30upx;
  font-size: 26upx;
  &.btn-one {
    background: #787cd5;
  }
  &.btn-two {
    background-color: #fb7299;
  }
  &.btn-three {
    background-color: #999999;
  }
  &.btn-five {
    background-color: #6db7ed;
  }
}

.footer {
  height: 80rpx;
  text-align: center;
}
.tip {
  text-align: center;
  font-size: 24upx;
  color: #666666;
  line-height: 80rpx;
}
</style>
